var es = sel => document.querySelectorAll(sel)

var bindAll = function(sel, eventName, callback) {
    var l = es(sel)
    for (var i = 0; i < l.length; i++) {
        var input = l[i]
        input.addEventListener(eventName, function(event) {
            callback(event)
        })
    }
}

var templateControl = function(key, item) {
    var t = `
    <div>
    <label>
        <input class="gua-auto-slider" type="range" 
                max="${item.max || 300}" 
                min="${item.min || 0}"
                value="${item.value}"
                data-value="config.${key}"
             
        >
        ${item._comment}: 初始值 ${item.value}     当前值： <span class="gua-label"></span>
    </label>
    </div>
    `
    return t
}
var insertControls = function() {
    var div = document.querySelector('.gua-controls')
    var keys = Object.keys(config) 
    for (var k of keys) {
        var item = config[k]
        var html = templateControl(k, item)
        div.insertAdjacentHTML('beforeend', html)
    }
}


var bindEvents = function() {
    bindAll('.gua-auto-slider', 'input', function(event) {
        var target = event.target
        var bindVar = target.dataset.value
        var v = target.value
        eval(bindVar + ".value =" + v)

        var label = target.closest('label').querySelector('.gua-label')
        label.innerText = v
    })
}

var __main = function() {
    // 从配置文件生成 HTML 控件。
    insertControls()
    // 绑定可 debug 的值
    bindEvents()

    var images = {
        // bullet: 'img/bullet.png',
        // cloud: 'img/cloud.png',
        // player: 'img/player.png',
        // sky: 'img/sky.png',
        // enemy: 'img/enemy.png',
        // particle: 'img/particle.png',
        // 跑步动画
        // run0: 'img/run/Run__000.png',
        // run1: 'img/run/Run__001.png',
        // run2: 'img/run/Run__002.png',
        // run3: 'img/run/Run__003.png',
        // run4: 'img/run/Run__004.png',
        // run5: 'img/run/Run__005.png',
        // run6: 'img/run/Run__006.png',
        // run7: 'img/run/Run__007.png',
        // run8: 'img/run/Run__008.png',

        // // 闲置动画
        // idle0: 'img/idle/idle__000.png',
        // idle1: 'img/idle/idle__001.png',
        // idle2: 'img/idle/idle__002.png',
        // idle3: 'img/idle/idle__003.png',
        // idle4: 'img/idle/idle__004.png',
        // idle5: 'img/idle/idle__005.png',
        // idle6: 'img/idle/idle__006.png',
        // idle7: 'img/idle/idle__007.png',
        // idle8: 'img/idle/idle__008.png',

        // // 跳跃
        // jump0: 'img/jump/jump__000.png',
        // jump1: 'img/jump/jump__001.png',
        // jump2: 'img/jump/jump__002.png',
        // jump3: 'img/jump/jump__003.png',
        // jump4: 'img/jump/jump__004.png',
        // jump5: 'img/jump/jump__005.png',
        // jump6: 'img/jump/jump__006.png',
        // jump7: 'img/jump/jump__007.png',
        // jump8: 'img/jump/jump__008.png',
        // jump9: 'img/jump/jump__009.png',

        // bird
        bg: 'img/sky.png',
        ground: 'img/land.jpg',
        pipe: 'img/pipe.png',
        pipeUp: 'img/PipeUp.png',
        pipeDown: 'img/PipeDown.png',
        gameOver: 'img/game_over.png',

        idle0: 'img/bird/bird-01.png',
        idle1: 'img/bird/bird-02.png',
        idle2: 'img/bird/bird-03.png',
        idle3: 'img/bird/bird-04.png',
    }
    var game = GuaGame.instance(30, images, function(game) {
        // init scene
        var title = new SceneTitle(game)
        game.addScene('title',title)
        game.runWithScene('title')

        document.querySelector('.gua-debug').addEventListener('click', function(event){
            let target = event.target

            if (target.innerText == 'enable debug') {
                var e = new SceneEditor(game)
                game.addScene('editor', e)
                game.runWithScene('editor')
                game.scene.debugModeEnabled = true
                target.innerText = 'disable debug'
            } else {
                var e = new SceneTitle(game)
                game.addScene('title', e)
                game.runWithScene('title')
                game.scene.debugModeEnabled = false
                target.innerText = 'enable debug'
            }
        })


        // enableDebugMode(game, true)

        // // mouse event
        // enableDrag = false
        // var canvas = document.getElementById('id-canvas')
        // var rect = canvas.getBoundingClientRect()
        // game.canvas.addEventListener('mousedown', function(event) {
        //     var x = event.clientX - rect.left
        //     var y = event.clientY - rect.top
        //     if (pointInItem(x, y, ball)) {
        //         enableDrag = true
        //     }
        // })
        // game.canvas.addEventListener('mousemove', function(event) {
        //     var x = event.clientX - rect.left
        //     var y = event.clientY - rect.top
        //     if (enableDrag) {
        //         // log('move')
        //         ball.x = x
        //         ball.y = y
        //     }
        // })
        // game.canvas.addEventListener('mouseup', function(event) {
        //     var x = event.clientX - rect.left
        //     var y = event.clientY - rect.top
        //     enableDrag = false
        // })
        // document.querySelector('#id-ballX-speed').addEventListener('input', function(event) {
        //     var input = event.target
        //         // log('event', event.target)
        //     ball.speedX = Number(input.value)
        // })
        // document.querySelector('#id-ballY-speed').addEventListener('input', function(event) {
        //     var input = event.target
        //         // log('event', event.target)
        //     ball.speedY = Number(input.value)
        // })
    })

}